<template>
  <div class="content-management-index">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>内容管理</h1>
      <p>管理谣言库、诈骗案例、知识库和热点事件</p>
    </div>

    <!-- 内容统计卡片 -->
    <div class="stats-cards">
      <div class="stats-card">
        <div class="card-icon rumor-icon">
          <i class="el-icon-warning"></i>
        </div>
        <div class="card-content">
          <h3>{{ totalRumors }}</h3>
          <p>谣言库条目</p>
          <div class="card-stats">
            <span class="stat-item">
              <i class="el-icon-check"></i>
              {{ verifiedRumors }} 已验证
            </span>
            <span class="stat-item">
              <i class="el-icon-time"></i>
              {{ pendingRumors }} 待审核
            </span>
          </div>
        </div>
      </div>

      <div class="stats-card">
        <div class="card-icon fraud-icon">
          <i class="el-icon-warning-outline"></i>
        </div>
        <div class="card-content">
          <h3>{{ totalFraudCases }}</h3>
          <p>诈骗案例</p>
          <div class="card-stats">
            <span class="stat-item">
              <i class="el-icon-circle-check"></i>
              {{ activeFraudCases }} 活跃
            </span>
            <span class="stat-item">
              <i class="el-icon-warning"></i>
              {{ highRiskCases }} 高风险
            </span>
          </div>
        </div>
      </div>

      <div class="stats-card">
        <div class="card-icon knowledge-icon">
          <i class="el-icon-notebook-2"></i>
        </div>
        <div class="card-content">
          <h3>{{ totalKnowledge }}</h3>
          <p>知识库文章</p>
          <div class="card-stats">
            <span class="stat-item">
              <i class="el-icon-document"></i>
              {{ publishedKnowledge }} 已发布
            </span>
            <span class="stat-item">
              <i class="el-icon-edit"></i>
              {{ draftKnowledge }} 草稿
            </span>
          </div>
        </div>
      </div>

      <div class="stats-card">
        <div class="card-icon topic-icon">
          <i class="el-icon-news"></i>
        </div>
        <div class="card-content">
          <h3>{{ totalTopics }}</h3>
          <p>热点事件</p>
          <div class="card-stats">
            <span class="stat-item">
              <i class="el-icon-top"></i>
              {{ hotTopics }} 热门
            </span>
            <span class="stat-item">
              <i class="el-icon-time"></i>
              {{ recentTopics }} 最新
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 管理模块网格 -->
    <div class="management-grid">
      <div class="management-card" @click="navigateToRumorDatabase">
        <div class="card-header">
          <div class="card-icon">
            <i class="el-icon-warning"></i>
          </div>
          <h3>谣言库管理</h3>
        </div>
        <div class="card-content">
          <p>管理谣言信息、验证状态和相关辟谣内容</p>
          <div class="feature-list">
            <div class="feature-item">
              <i class="el-icon-check"></i>
              <span>谣言验证</span>
            </div>
            <div class="feature-item">
              <i class="el-icon-document"></i>
              <span>辟谣内容</span>
            </div>
            <div class="feature-item">
              <i class="el-icon-data-analysis"></i>
              <span>传播分析</span>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <el-button type="primary" size="small">
            进入管理
            <i class="el-icon-arrow-right"></i>
          </el-button>
        </div>
      </div>

      <div class="management-card" @click="navigateToFraudCaseManagement">
        <div class="card-header">
          <div class="card-icon">
            <i class="el-icon-warning-outline"></i>
          </div>
          <h3>诈骗案例管理</h3>
        </div>
        <div class="card-content">
          <p>管理诈骗案例信息、风险评估和防范措施</p>
          <div class="feature-list">
            <div class="feature-item">
              <i class="el-icon-view"></i>
              <span>案例分析</span>
            </div>
            <div class="feature-item">
              <i class="el-icon-warning"></i>
              <span>风险评估</span>
            </div>
            <div class="feature-item">
              <i class="el-icon-shield"></i>
              <span>防范措施</span>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <el-button type="primary" size="small">
            进入管理
            <i class="el-icon-arrow-right"></i>
          </el-button>
        </div>
      </div>

      <div class="management-card" @click="navigateToKnowledgeManagement">
        <div class="card-header">
          <div class="card-icon">
            <i class="el-icon-notebook-2"></i>
          </div>
          <h3>知识库管理</h3>
        </div>
        <div class="card-content">
          <p>管理防诈骗知识、技术文档和用户教程</p>
          <div class="feature-list">
            <div class="feature-item">
              <i class="el-icon-document"></i>
              <span>文章管理</span>
            </div>
            <div class="feature-item">
              <i class="el-icon-folder"></i>
              <span>分类管理</span>
            </div>
            <div class="feature-item">
              <i class="el-icon-star-on"></i>
              <span>推荐内容</span>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <el-button type="primary" size="small">
            进入管理
            <i class="el-icon-arrow-right"></i>
          </el-button>
        </div>
      </div>

      <div class="management-card" @click="navigateToHotTopicManagement">
        <div class="card-header">
          <div class="card-icon">
            <i class="el-icon-news"></i>
          </div>
          <h3>热点事件管理</h3>
        </div>
        <div class="card-content">
          <p>管理热点事件、舆情监控和事件追踪</p>
          <div class="feature-list">
            <div class="feature-item">
              <i class="el-icon-connection"></i>
              <span>事件追踪</span>
            </div>
            <div class="feature-item">
              <i class="el-icon-view"></i>
              <span>舆情监控</span>
            </div>
            <div class="feature-item">
              <i class="el-icon-data-line"></i>
              <span>趋势分析</span>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <el-button type="primary" size="small">
            进入管理
            <i class="el-icon-arrow-right"></i>
          </el-button>
        </div>
      </div>
    </div>

    <!-- 内容概览 -->
    <div class="content-overview">
      <div class="overview-left">
        <el-card class="recent-content">
          <template #header>
            <div class="card-header">
              <span>最近内容</span>
              <el-button type="text" @click="viewAllContent">
                查看全部
              </el-button>
            </div>
          </template>
          <div class="content-list">
            <div class="content-item" v-for="item in recentContent" :key="item.id">
              <div class="content-type" :class="item.type">
                {{ getContentTypeText(item.type) }}
              </div>
              <div class="content-info">
                <div class="content-title">{{ item.title }}</div>
                <div class="content-meta">
                  <span class="content-author">{{ item.author }}</span>
                  <span class="content-time">{{ item.createTime }}</span>
                </div>
              </div>
              <div class="content-status" :class="item.status">
                {{ getStatusText(item.status) }}
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <div class="overview-right">
        <el-card class="content-stats">
          <template #header>
            <div class="card-header">
              <span>内容统计</span>
              <el-button type="text" @click="refreshStats">
                <i class="el-icon-refresh"></i>
                刷新
              </el-button>
            </div>
          </template>
          <div class="stats-chart">
            <div ref="chartContainer" class="chart"></div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 快速操作 -->
    <div class="quick-actions">
      <el-card class="actions-card">
        <template #header>
          <span>快速操作</span>
        </template>
        <div class="actions-grid">
          <div class="action-item" @click="addRumor">
            <i class="el-icon-plus"></i>
            <span>添加谣言</span>
          </div>
          <div class="action-item" @click="addFraudCase">
            <i class="el-icon-plus"></i>
            <span>添加案例</span>
          </div>
          <div class="action-item" @click="addKnowledge">
            <i class="el-icon-plus"></i>
            <span>添加知识</span>
          </div>
          <div class="action-item" @click="addTopic">
            <i class="el-icon-plus"></i>
            <span>添加热点</span>
          </div>
          <div class="action-item" @click="batchImport">
            <i class="el-icon-upload"></i>
            <span>批量导入</span>
          </div>
          <div class="action-item" @click="exportData">
            <i class="el-icon-download"></i>
            <span>导出数据</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

export default {
  name: 'ContentManagementIndex',
  setup() {
    const router = useRouter()
    const chartContainer = ref(null)
    let chart = null

    // 统计数据
    const totalRumors = ref(3456)
    const verifiedRumors = ref(2890)
    const pendingRumors = ref(566)
    const totalFraudCases = ref(1234)
    const activeFraudCases = ref(892)
    const highRiskCases = ref(342)
    const totalKnowledge = ref(789)
    const publishedKnowledge = ref(645)
    const draftKnowledge = ref(144)
    const totalTopics = ref(156)
    const hotTopics = ref(23)
    const recentTopics = ref(45)

    // 最近内容
    const recentContent = ref([
      {
        id: 1,
        type: 'rumor',
        title: '某地发生地震谣言',
        author: '管理员',
        createTime: '2025-01-15 10:30:00',
        status: 'verified'
      },
      {
        id: 2,
        type: 'fraud',
        title: '新型电信诈骗案例',
        author: '安全专家',
        createTime: '2025-01-15 09:15:00',
        status: 'published'
      },
      {
        id: 3,
        type: 'knowledge',
        title: '如何识别AI生成图片',
        author: '技术专家',
        createTime: '2025-01-15 08:45:00',
        status: 'draft'
      },
      {
        id: 4,
        type: 'topic',
        title: '春节期间网络安全提醒',
        author: '运营团队',
        createTime: '2025-01-15 08:00:00',
        status: 'hot'
      },
      {
        id: 5,
        type: 'rumor',
        title: '疫苗相关不实信息',
        author: '医学专家',
        createTime: '2025-01-14 16:20:00',
        status: 'pending'
      }
    ])

    // 初始化图表
    const initChart = () => {
      if (!chartContainer.value) return

      chart = echarts.init(chartContainer.value)
      
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '内容分布',
            type: 'pie',
            radius: '50%',
            data: [
              { value: totalRumors.value, name: '谣言库' },
              { value: totalFraudCases.value, name: '诈骗案例' },
              { value: totalKnowledge.value, name: '知识库' },
              { value: totalTopics.value, name: '热点事件' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      chart.setOption(option)
    }

    // 获取内容类型文本
    const getContentTypeText = (type) => {
      switch (type) {
        case 'rumor': return '谣言'
        case 'fraud': return '案例'
        case 'knowledge': return '知识'
        case 'topic': return '热点'
        default: return '未知'
      }
    }

    // 获取状态文本
    const getStatusText = (status) => {
      switch (status) {
        case 'verified': return '已验证'
        case 'published': return '已发布'
        case 'draft': return '草稿'
        case 'hot': return '热门'
        case 'pending': return '待审核'
        default: return '未知'
      }
    }

    // 导航方法
    const navigateToRumorDatabase = () => {
      router.push('/admin/content/rumor-database')
    }

    const navigateToFraudCaseManagement = () => {
      router.push('/admin/content/fraud-cases')
    }

    const navigateToKnowledgeManagement = () => {
      router.push('/admin/content/knowledge-base')
    }

    const navigateToHotTopicManagement = () => {
      router.push('/admin/content/hot-topics')
    }

    // 其他操作
    const viewAllContent = () => {
      ElMessage.info('查看全部内容')
    }

    const refreshStats = () => {
      ElMessage.success('统计数据已刷新')
    }

    const addRumor = () => {
      router.push('/admin/content/rumor-database?action=add')
    }

    const addFraudCase = () => {
      router.push('/admin/content/fraud-cases?action=add')
    }

    const addKnowledge = () => {
      router.push('/admin/content/knowledge-base?action=add')
    }

    const addTopic = () => {
      router.push('/admin/content/hot-topics?action=add')
    }

    const batchImport = () => {
      ElMessage.info('批量导入功能')
    }

    const exportData = () => {
      ElMessage.success('数据导出成功')
    }

    onMounted(() => {
      initChart()
    })

    onUnmounted(() => {
      if (chart) {
        chart.dispose()
      }
    })

    return {
      totalRumors,
      verifiedRumors,
      pendingRumors,
      totalFraudCases,
      activeFraudCases,
      highRiskCases,
      totalKnowledge,
      publishedKnowledge,
      draftKnowledge,
      totalTopics,
      hotTopics,
      recentTopics,
      recentContent,
      chartContainer,
      getContentTypeText,
      getStatusText,
      navigateToRumorDatabase,
      navigateToFraudCaseManagement,
      navigateToKnowledgeManagement,
      navigateToHotTopicManagement,
      viewAllContent,
      refreshStats,
      addRumor,
      addFraudCase,
      addKnowledge,
      addTopic,
      batchImport,
      exportData
    }
  }
}
</script>

<style scoped>
.content-management-index {
  padding: 20px;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 32px;
  color: #333;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 16px;
  color: #666;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stats-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 24px;
  color: #fff;
}

.rumor-icon {
  background: linear-gradient(45deg, #e6a23c, #ffd666);
}

.fraud-icon {
  background: linear-gradient(45deg, #f56c6c, #ff9c6e);
}

.knowledge-icon {
  background: linear-gradient(45deg, #409eff, #66d9ef);
}

.topic-icon {
  background: linear-gradient(45deg, #67c23a, #95de64);
}

.card-content {
  flex: 1;
}

.card-content h3 {
  font-size: 28px;
  color: #333;
  margin-bottom: 5px;
}

.card-content p {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.card-stats {
  display: flex;
  gap: 15px;
}

.stat-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.stat-item i {
  margin-right: 5px;
}

.management-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.management-card {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e6e6e6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.management-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #409eff;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.card-header .card-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(45deg, #409eff, #66d9ef);
  margin-right: 15px;
  font-size: 20px;
}

.card-header h3 {
  font-size: 18px;
  color: #333;
  margin: 0;
}

.card-content p {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
  line-height: 1.5;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feature-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.feature-item i {
  margin-right: 8px;
  color: #409eff;
}

.card-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.content-overview {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.recent-content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.content-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.content-item:hover {
  border-color: #409eff;
  background: #f0f9ff;
}

.content-type {
  width: 50px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
  margin-right: 15px;
  flex-shrink: 0;
}

.content-type.rumor {
  background: #e6a23c;
}

.content-type.fraud {
  background: #f56c6c;
}

.content-type.knowledge {
  background: #409eff;
}

.content-type.topic {
  background: #67c23a;
}

.content-info {
  flex: 1;
}

.content-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
}

.content-meta {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #999;
}

.content-status {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.content-status.verified {
  background: #f0f9ff;
  color: #67c23a;
}

.content-status.published {
  background: #f0f9ff;
  color: #409eff;
}

.content-status.draft {
  background: #f8f9fa;
  color: #909399;
}

.content-status.hot {
  background: #fef0e6;
  color: #e6a23c;
}

.content-status.pending {
  background: #fef0f0;
  color: #f56c6c;
}

.content-stats {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stats-chart {
  height: 300px;
}

.chart {
  width: 100%;
  height: 100%;
}

.quick-actions {
  margin-bottom: 20px;
}

.actions-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 15px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-item:hover {
  background: #f0f9ff;
  border-color: #409eff;
  color: #409eff;
}

.action-item i {
  font-size: 24px;
  margin-bottom: 8px;
}

.action-item span {
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .management-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  
  .content-overview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .management-grid {
    grid-template-columns: 1fr;
  }
  
  .actions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
</style> 